<template>
  <div class="not-found-view">
    <div class="error-container">
      <div class="error-icon">
        <svg viewBox="0 0 100 100" class="error-svg">
          <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="2"/>
          <text x="50" y="35" text-anchor="middle" class="error-code">404</text>
          <text x="50" y="65" text-anchor="middle" class="error-text">NOT FOUND</text>
        </svg>
      </div>
      
      <div class="error-content">
        <h1 class="error-title">页面未找到</h1>
        <p class="error-description">
          抱歉，您访问的页面不存在或已被移动。
        </p>
        <p class="error-suggestion">
          可能的原因：
        </p>
        <ul class="error-reasons">
          <li>URL地址输入错误</li>
          <li>页面已被删除或移动</li>
          <li>您没有访问权限</li>
          <li>服务器临时故障</li>
        </ul>
      </div>
      
      <div class="error-actions">
        <button @click="goHome" class="action-btn primary">
          <span class="btn-icon">🏠</span>
          返回首页
        </button>
        <button @click="goBack" class="action-btn secondary">
          <span class="btn-icon">↩️</span>
          返回上页
        </button>
        <button @click="refresh" class="action-btn secondary">
          <span class="btn-icon">🔄</span>
          刷新页面
        </button>
      </div>
      
      <div class="help-section">
        <h3>需要帮助？</h3>
        <div class="help-links">
          <router-link to="/overview" class="help-link">
            <span class="link-icon">📊</span>
            帝国概览
          </router-link>
          <router-link to="/resources" class="help-link">
            <span class="link-icon">📦</span>
            资源管理
          </router-link>
          <router-link to="/buildings" class="help-link">
            <span class="link-icon">🏗️</span>
            建筑管理
          </router-link>
          <router-link to="/technology" class="help-link">
            <span class="link-icon">🔬</span>
            科技研发
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回首页
function goHome() {
  router.push('/')
}

// 返回上一页
function goBack() {
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    goHome()
  }
}

// 刷新页面
function refresh() {
  window.location.reload()
}
</script>

<style scoped>
.not-found-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.error-container {
  max-width: 600px;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 3rem 2rem;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-color);
}

.error-icon {
  margin-bottom: 2rem;
}

.error-svg {
  width: 120px;
  height: 120px;
  color: var(--primary-color);
}

.error-code {
  font-size: 16px;
  font-weight: bold;
  fill: currentColor;
}

.error-text {
  font-size: 8px;
  fill: var(--text-secondary);
}

.error-content {
  margin-bottom: 2rem;
}

.error-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-weight: 700;
}

.error-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.error-suggestion {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.error-reasons {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.error-reasons li {
  padding: 0.5rem 0;
  color: var(--text-secondary);
  position: relative;
  padding-left: 1.5rem;
}

.error-reasons li::before {
  content: '•';
  color: var(--primary-color);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.action-btn.primary {
  background: var(--primary-color);
  color: var(--bg-primary);
}

.action-btn.primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

.action-btn.secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.action-btn.secondary:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.btn-icon {
  font-size: 1.1rem;
}

.help-section {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.help-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.help-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.help-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.help-link:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.link-icon {
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-container {
    padding: 2rem 1rem;
  }
  
  .error-title {
    font-size: 2rem;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    width: 100%;
    max-width: 200px;
  }
  
  .help-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .not-found-view {
    padding: 1rem;
  }
  
  .error-container {
    padding: 1.5rem 1rem;
  }
  
  .error-svg {
    width: 80px;
    height: 80px;
  }
  
  .error-title {
    font-size: 1.5rem;
  }
}
</style>